<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText" v-if="isHome">返回</block>
				<view slot="backText" v-if="!isHome" @click="toHomePage">返回</view>
				<block slot="content">{{activity.regional || ''}} - {{activity.type || '活动详情'}}</block>
			</cu-custom>
			<!-- <view class="padding-left-xl padding-right-xl" v-if="activity.status == '报名中'">
				<button class="cu-btn block bg-green margin-tb-sm lg" type="" open-type="share" v-if="hasUserInfo">
					邀请好友报名
				</button>
				<button class="cu-btn block bg-green margin-tb-sm lg" @tap="showModal" data-target="DialogModal1" v-else>
					邀请好友报名
				</button>
			</view> -->
			
			<view class="padding-left-xl padding-right-xl" v-if="activity.status != '报名中'">
				<view class="flex solid-bottom justify-between">
					<button class="cu-btn block margin-tb-sm lg shadow" :class="blueBtnBg" type="" @click="swatchBtn(0)" :disabled="!isAdmin">蓝方胜</button>
					<button class="cu-btn block margin-tb-sm lg shadow" :class="redBtnBg" type="" @click="swatchBtn(1)" :disabled="!isAdmin">红方胜</button>
				</view>
			</view>
			
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<view style="font-weight: bold;">{{activity.title}}</view>
					<view class="cu-tag round sm margin-left-sm" :class="activity.status == '已结束' ? 'bg-grey' : activity.status == '报名中' ? 'bg-blue' : 'bg-green'">{{activity.status}}</view>
				</view>
				<view class="action" style="width: 200upx;">
					<button class="cu-btn round bg-olive shadow" open-type="share" v-if="hasUserInfo">
						邀请好友
					</button>
					<button class="cu-btn round bg-olive shadow" @tap="showModal" data-target="DialogModal1" v-else>
						邀请好友
					</button>
				</view>
			</view>
			<view class="cu-bar bg-white">
				<view class="action">
					<view class="text-bold">开始时间：</view>
					<view>{{activity.startDate}}</view>
				</view>
				<view class="action">
					<zywork-icon type="iconshuaxin" size="20" color="grey" @tap="refreshRanks"></zywork-icon>
				</view>
			</view>
			
			<view v-for="(item,index) in activityRanksList" :key="index">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title" :class="item.type == '蓝方' ? 'text-blue' : 'text-red'"></text> {{item.type}}
					</view>
					<view class="action">
						{{item.name}}
						<zywork-icon type="iconguanjun" size="22" color="orange" v-if="item.isVictory == 1"></zywork-icon>
					</view>
				</view>
				<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
					<view class="cu-item" :class="menuArrow?'arrow':''">
						<view class="content">
							<view class="flex solid-bottom justify-between">
								<view class="padding-sm margin-xs">位置</view>
								<view class="padding-sm margin-xs">ID</view>
								<view class="padding-sm margin-xs">水平</view>
							</view>
						</view>
						<view class="action">
							<view class="flex solid-bottom justify-center">
								<view class="padding-sm margin-xs">操作</view>
							</view>
						</view>
					</view>
					<view class="cu-item" :class="menuArrow?'arrow':''" v-for="(ranksItem, ranksIndex) in item.ranksUserList" :key="ranksIndex">
						<view class="content" @click="showGameInfoModal(ranksItem.userId)">
							<view class="flex solid-bottom justify-between">
								<view class="padding-sm margin-xs">
									<view class="cu-tag round light" :class="item.type == '蓝方' ? 'bg-blue' : 'bg-red'">{{ranksItem.position}}</view>
								</view>
								<view class="padding-sm margin-xs flex justify-start">
									<view>{{ranksItem.gameId || ''}}</view>
									<zywork-icon type="iconnan" size="20" color="blue" v-if="ranksItem.gender == 1"></zywork-icon>
									<zywork-icon type="iconnv" size="20" color="red" v-if="ranksItem.gender == 2"></zywork-icon>
								</view>
								<view class="padding-sm margin-xs" style="width: 105upx;">{{ranksItem.level || ''}}</view>
							</view>
						</view>
						<view class="action">
							<view v-if="activity.status != '已结束'">
								<view class="flex solid-bottom justify-center" v-if="!ranksItem.userId">
									<button class="cu-btn round bg-green shadow" @click="signUp(ranksItem.id)" v-if="hasUserInfo">
										{{optionBtnText}}
									</button>
									<button class="cu-btn round bg-green shadow" @tap="showModal" data-target="DialogModal1" v-else>{{optionBtnText}}</button>
								</view>
								<view class="flex solid-bottom justify-center" v-else>
									<button class="cu-btn round bg-red shadow" v-if="userId == ranksItem.userId" @click="cancelSignUp(ranksItem.id)">取消</button>
									<button class="cu-btn round bg-green shadow" v-else disabled>报名</button>
								</view>
							</view>
							<view v-else>
								<view class="flex solid-bottom justify-center">
									<button class="cu-btn round bg-green shadow" disabled>报名</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">温馨提示</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						请先前往个人中心登记信息
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left" @tap="toAboutPage">确定</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='userGameInfoModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">参赛者信息</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<view class="flex solid-bottom justify-start">
							<view class="padding-sm margin-xs text-bold">微信号：</view>
							<view class="padding-sm margin-xs">{{userGameInfo.weChart || ''}}</view>
						</view>
						<view class="flex solid-bottom justify-start">
							<view class="padding-sm margin-xs text-bold">游戏ID：</view>
							<view class="padding-sm margin-xs">{{userGameInfo.gameId || ''}}</view>
						</view>
						<view class="flex solid-bottom justify-start">
							<view class="padding-sm margin-xs text-bold">擅长位置：</view>
							<view class="padding-sm margin-xs">{{userGameInfo.gameAtPosition || ''}}</view>
						</view>
						<view class="flex solid-bottom justify-start">
							<view class="padding-sm margin-xs text-bold">段位：</view>
							<view class="padding-sm margin-xs">{{userGameInfo.level || ''}}</view>
						</view>
						<view class="flex solid-bottom justify-start">
							<view class="padding-sm margin-xs text-bold">大区：</view>
							<view class="padding-sm margin-xs">{{userGameInfo.regional || ''}}</view>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">关闭</button>
							<button class="cu-btn bg-green margin-left" @tap="copyWeChart">复制微信号</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as ResponseStatus from '@/common/response-status.js'
	import {
		BASE_URL,
		doPostForm,
		doPostJson,
		showInfoToast,
		doGet,
		nullToStr,
		USER_ID,
		HAS_USER_INFO,
		SHARE_CODE_PAGE_IMG,
		MY_SHARE_CODE,
		SHARE_TITLE,
		SYS_INFO,
		FRONT_BASE_URL,
		IS_ADMIN,
		SHARE_CODE
	} from '@/common/util.js'
	import {loadSysInfo} from '@/common/sys-info.js'
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	export default {
		components: {
			zyworkIcon,
		},
		data() {
			return {
				menuBorder: true,
				menuArrow: false,
				menuCard: false,
				optionBtnText: '报名',
				topCardTitle: '蓝方',
				bottomCardTitle: '红方',
				activityId: null,
				activity: {
					title: '',
					tyte: '5V5征召'
				},
				activityRanksList: [],
				userId: null,
				hasUserInfo: false,
				modalName: null,
				sysInfo: {},
				frontBaseUrl: FRONT_BASE_URL,
				shareCode: null,
				blueBtnBg: 'bg-grey',
				redBtnBg: 'bg-grey',
				isAdmin: false,
				isHome: true,
				userGameInfo: {
					weChart: '',
					regional: '',
					gameId: '',
					gameAtPosition: '',
					level: ''
				},
			};
		},
		onLoad(options) {
			if (options.shareCode) {
				this.isHome = false
				uni.setStorageSync(SHARE_CODE, options.shareCode)
			}
			this.activityId = options.activityId
			this.loadActivityInfo(this.activityId)
			this.loadActivityRanksList(this.activityId)
			loadSysInfo(this)
		},
		onShow() {
			this.shareCode = uni.getStorageSync(MY_SHARE_CODE);
			if (!this.shareCode) {
				uni.hideShareMenu()
			} else {
				uni.showShareMenu()
			}
			this.isAdmin = uni.getStorageSync(IS_ADMIN)
			this.userId = uni.getStorageSync(USER_ID)
			this.hasUserInfo = uni.getStorageSync(HAS_USER_INFO)
		},
		onShareAppMessage(res) {
			let shareImgUrl = SHARE_CODE_PAGE_IMG;
			if (this.sysInfo.shareImg) {
				shareImgUrl = this.frontBaseUrl + this.sysInfo.shareImg
			}
			let shareTitle = SHARE_TITLE 
			if (this.sysInfo.shareTitle) {
				shareTitle = this.sysInfo.shareTitle
			}
			if (this.activity.title) {
				shareTitle = this.activity.title
			}
			return  {
				title: shareTitle,
				path: '/pages/activity/activity_detail?activityId='+this.activityId+'&shareCode=' + this.shareCode,
				imageUrl: shareImgUrl
			}
		},
		methods: {
			/**
			 * 显示游戏信息
			 */
			showGameInfoModal(userId) {
				if (userId) {
					doGet('/game-info/any/get-info/' + userId, {}, {}, false).then(response => {
						let [error, res] = response;
						if (res.data.code === ResponseStatus.OK) {
							this.modalName = 'userGameInfoModal'
							this.userGameInfo = res.data.data
						} else {
							showInfoToast('用户信息获取失败');
						}
					})
				}
			},
			/**
			 * 复制微信号
			 */
			copyWeChart() {
				if (this.userGameInfo.weChart) {
					uni.setClipboardData({
						data: this.userGameInfo.weChart + '',
						success: () => {
							// 成功处理
							showInfoToast("复制成功")
						},
						fail: () => {
							// 失败处理
							showInfoToast("复制失败")
						}
					});
				} else {
					showInfoToast("未设置微信号")
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
				this.userGameInfo = {
					weChart: '',
					regional: '',
					gameId: '',
					gameAtPosition: '',
					level: ''
				}
			},
			toAboutPage() {
				uni.navigateTo({
					url: '/pages/about/home_1?showBreak=true'
				});
				this.modalName = null
			},
			toHomePage() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			/**
			 * 加载活动信息
			 */
			loadActivityInfo(id) {
				doGet('/activity/any/one/' + id, {}, {}, false).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						this.activity = res.data.data
					}
				})
			},
			/**
			 * 刷新页面信息
			 */
			refreshRanks() {
				this.loadActivityRanksList(this.activityId)
			},
			/** 加载活动信息 */
			loadActivityRanksList(activityId) {
				uni.showLoading({
					title: '加载中...'
				})
				doGet('/activity-ranks/any/all-by-activity/' + activityId, {}, {}, false).then(response => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.activityRanksList = []
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						const rows = res.data.data
						this.activityRanksList = rows
						if (rows.length) {
							this.blueBtnBg = 'bg-grey'
							this.redBtnBg = 'bg-grey'
							rows.forEach(item => {
								const isVictory = item.isVictory
								if (isVictory == 1) {
									// 有一方获胜了
									if (item.type == '蓝方') {
										this.blueBtnBg = 'bg-blue'
									} else if (item.type == '红方') {
										this.redBtnBg = 'bg-red'
									}
									return
								}
							})
						}
					} else {
						showInfoToast(res.data.message);
					}
				})
			},
			/** 报名 */
			signUp(id) {
				uni.showLoading({
					title: '报名中...'
				})
				let data = {
					id: id,
					activityId: this.activity.id
				}
				doPostForm('/ranks-user/user/sign-up', data, {}, true).then(response => {
					uni.hideLoading()
					let [error, res] = response;
					showInfoToast(res.data.message);
					if (res.data.code == ResponseStatus.OK) {
						this.activity = res.data.data
						setTimeout(()=>{
							this.loadActivityRanksList(this.activity.id)
						},1000)
					} else {
						if (res.data.message == '请先完善个人信息') {
							this.modalName = 'DialogModal1'
						} else {
							setTimeout(()=>{
								this.loadActivityRanksList(this.activity.id)
							},1000)
						}
					}
				})
			},
			/** 取消报名 */
			cancelSignUp(id) {
				uni.showModal({
					title: '确认操作',
					content: '你确定要取消报名吗？',
					success: (e) => {
						if (e.confirm) {
							uni.showLoading({
								title: '取消中...'
							})
							let data = {
								id: id,
								activityId: this.activityId
							}
							doPostForm('/ranks-user/user/cancel-sign-up', data, {}, true).then(response => {
								uni.hideLoading()
								let [error, res] = response;
								showInfoToast(res.data.message);
								if (res.data.code == ResponseStatus.OK) {
									this.activity = res.data.data
								}
								setTimeout(()=>{
									this.loadActivityRanksList(this.activityId)
								},1000)
							})
						}
					},
					fail: (e) => {
					}
				})
				
			},
			/** 更新胜利队伍信息 */
			swatchBtn(type) {
				let data = {
					activityId: this.activityId,
					type: ''
				}
				if (type == 0) {
					// 蓝方胜
					// this.blueBtnBg = 'bg-blue'
					// this.redBtnBg = 'bg-grey'
					data.type = '蓝方'
				} else if (type == 1) {
					// 红方胜
					// this.blueBtnBg = 'bg-grey'
					// this.redBtnBg = 'bg-red'
					data.type = '红方'
				}
				doPostForm('/activity-ranks/user/update-victory', data, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code == ResponseStatus.OK) {
						showInfoToast('操作成功')
						setTimeout(()=>{
							this.loadActivityRanksList(this.activityId)
						},1000)
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		overflow: scroll;
		height: 100Vh;
		width: 100vw;
	}

	
	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
